<template>
  <div class="mainList">
    <div class="searchMain">
      <div class="searchPos" :class="{'boxShow': searchHide}">
        <a-form ref="formSearchRef" :model="formSearch" v-if="columnsDistShow">
          <div class="form-main" :class="{'searchHide': searchHide}">
            <div class="form-item">
              <!-- <a-form-item field="title" label="标题" label-col-flex="90px" class="searchTop-list">
                  <a-input v-model="formSearch.title" allow-clear placeholder="请输入标题"/>
                </a-form-item> -->
              <a-form-item field="type" label="服务类型" label-col-flex="90px" class="searchTop-list">
                <a-select v-model="formSearch.type" :max-tag-count="1"
                          :options="columnsDist.dicthelpApi_waybillServiceShipmentTypeList.data"
                          :field-names="{ value: 'id', label: 'name' }"
                          placeholder="请选择服务类型" allow-clear allow-search :virtual-list-props="{height:200}">
                </a-select>
              </a-form-item>
              <a-form-item field="address" label="目的地" label-col-flex="90px" class="searchTop-list">
                  <a-select  v-model="formSearch.address" :max-tag-count="1" :options="columnsDist.dicthelpApi_addressChang.data" :field-names="{ value: 'value', label: 'label' }"
                  placeholder="请选择目的地" allow-clear allow-search :virtual-list-props="{height:200}">
                    </a-select>
                </a-form-item>
                <a-form-item field="number" label="出库单标题" label-col-flex="90px" class="searchTop-list">
                <a-input v-model="formSearch.title" allow-clear placeholder="请输入出库单标题"/>
              </a-form-item>
              <a-form-item field="shipment_no" label="箱唛" label-col-flex="90px" class="searchTop-list">
                <a-input v-model="formSearch.shipment_no" allow-clear placeholder="清输入箱唛"/>
                </a-form-item>
                <!-- <a-form-item field="car_id" label="车辆" label-col-flex="90px" class="searchTop-list">
                  <a-select  v-model="formSearch.car_id" :max-tag-count="1" :options="columnsDist.dicthelpApi_waybillCarList.data" :field-names="{ value: 'id', label: 'car_number' }"
                  placeholder="请选择车辆" allow-clear allow-search :virtual-list-props="{height:200}">
                    </a-select>
                </a-form-item> -->
                <a-form-item field="car_number" label="车辆" label-col-flex="90px" class="searchTop-list">
                <a-input v-model="formSearch.car_number" allow-clear placeholder="请输入车辆信息"/>
                </a-form-item>
                    <a-form-item field="created_at" label="创建时间" label-col-flex="90px" class="searchTop-list">
                      <a-range-picker
                        showTime
                        v-model="formSearch.created_at"
                        :time-picker-props="{
                        defaultValue:['00:00:00','23:59:59']
                        }"
                />
              </a-form-item>
            </div>
            <div class="form-buttom">
              <div>
                <a-button type="primary" html-type="submit" @click="submitSearch" style="margin-right: 10px;">
                  <template #icon>
                    <icon-search/>
                  </template>
                  搜索
                </a-button>
                <a-button @click="resetSearch">
                  <template #icon>
                    <icon-delete/>
                  </template>
                  重置
                </a-button>
              </div>
              <a-space class="lg:mt-0 mt-2"
                       style="margin-top: 20px;display: flex;justify-content: flex-end;margin-right: 10px">
                <a-tooltip content="显隐搜索">
                  <a-button shape="circle" @click="searchHide=!searchHide" style="margin-right: 10px">
                    <icon-search/>
                  </a-button>
                </a-tooltip>
                <a-tooltip content="设置">
                  <a-button shape="circle" @click="openSetting">
                    <icon-settings/>
                  </a-button>
                </a-tooltip>
              </a-space>
            </div>
          </div>

          <div class="touHide" style="display: flex;justify-content: center;margin-bottom: 10px;">
            <a-link v-if="searchHide" @click="searchHide=!searchHide" size="small">
              {{ searchHide ? '收起' : '' }}
              <template #icon>
                <icon-up v-if="searchHide"/>
              </template>
            </a-link>
          </div>
        </a-form>
      </div>
    </div>
    <div class="ma-content-block justify-between p-4 mainTable">
      <!-- 操作按钮 -->
      <div class="top-button">
        <div>
          <a-button type="primary" @click="addAction()">
            <template #icon>
              <icon-plus/>
            </template>
            新增
          </a-button>
        </div>
        <a-space class="lg:mt-0 mt-2">
          <a-tooltip content="显隐搜索">
            <a-button shape="circle" @click="searchHide=!searchHide">
              <icon-search/>
            </a-button>
          </a-tooltip>
          <a-tooltip content="设置">
            <a-button shape="circle" @click="openSetting">
              <icon-settings/>
            </a-button>
          </a-tooltip>
        </a-space>

      </div>
      <!-- tab切换 -->
      <a-tabs class="ma-tabs mb-1 tabs" @change="clickTap" v-model:active-key="formSearch.status">
        <a-tab-pane :key="item.key" :title="item.title" v-for="item in shipmentTabs">
          <template #title>
            <slot :name="'tabTitle-' + item.label">{{ item.title }}{{ item.count ? `(${item.count})` : '' }}</slot>
          </template>
        </a-tab-pane>
      </a-tabs>
      <!-- 状态按钮 -->
      <div style="display: flex;">
        <button-group :button-groups="buttonGroups" :dataList="dataList" :crud-ref="crudRef" :selected="selected"
                      :currentStatus="currentStatus"/>
      </div>
      <div ref="tablePrantRef">
      <a-table ref="tableRef" :sticky-header="true" :scrollbar="true" :stripe="true" :scroll="{ x: '100%', y: '100%' }"  :columns="computedColumns" :data="dataList" class="table-list"
    hide-expand-button-on-empty :loading="loading" row-key="id" v-model:selectedKeys="selected" @selection-change="setSelecteds($event)" stripe :row-selection="rowSelection" column-resizable :pagination="false">
      <!--  列表插槽    -->
        <template #status="{ record }" v-if="columnsDistShow">{{getDictData('dictObj','waybill_sea_task_send_status',record.status,2,columnsDist) }}</template>
        <template #type="{ record }" v-if="columnsDistShow">{{getDictData('attrApi','dicthelpApi_waybillServiceShipmentTypeList',record.type,3,columnsDist) }}</template>
        <template #address="{ record }" v-if="columnsDistShow">{{getDictData('attrApi','dicthelpApi_addressChang',record.address,1,columnsDist) }}</template>
        <template #isa="{ record }">
           <div style="display: flex;align-items: center;justify-content: center;">
            <a-link title="上传ISA"  @click="eadrCar(record,3)" v-if="record.isa==null">
              <icon-to-top/>
          </a-link>
              <a-link title="下载ISA"  @click="downloadatAachable(record.isa)" v-else-if="record.isa?.filepath">
                {{record.isa?.remark}} <icon-to-bottom/>
              </a-link>
             <div v-else style="margin-right: 8px;"> {{record.isa?.remark}}</div>
           </div>
        </template>
        <template #pod="{ record }">
            <a-link title="下载POD"  @click="downloadatAachable(record.pod)" v-if="record.pod?.filepath">
              <icon-to-bottom/>下载
          </a-link>
          <a-link title="上传POD"   @click="eadrCar(record,4)" v-else-if="record.pod==null">
              <icon-to-top/>
          </a-link>
        </template>
        <template #car="{ record }" v-if="columnsDistShow">
          <div  v-if="record.status==1 && record?.car_id!='0'">{{ record?.car?. car_number}}<a-link  title="修改车辆" @click="eadrCar(record,1)"><icon-edit /></a-link></div>
          <div v-else>{{ record?.car?. car_number}}</div>
        </template>
        <template #eta="{ record }">
           <div @click="editAction(record)" style="height: 20px; cursor: pointer;">{{record?.eta}}</div>
        </template>
        <template #fixed="{ record }">
          <div  style="display: flex; align-items: center;">
            <a-link  title="编辑" @click="editAction(record)"><icon-edit /></a-link>
              <a-link title="下载BOL" v-if="record.car_id!=0" @click="downloadTap(record)"><icon-to-bottom/>下载BOL</a-link>
              <a-link title="分配车辆" v-if="record.car_id==0" @click="eadrCar(record,2)">分配车辆</a-link>
              <a-link  title="装车" @click="tapCar(record)">装车</a-link>
          </div>
          </template>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="foot-list">
        <a-pagination
            :total="pageInfo.total"
            show-total show-jumper show-page-size
            v-model:current="formSearch.page"
            @change="pageChange"
            @page-size-change="pageSizeChange"
            :page-size-options="[10, 20, 30, 50, 100]"
            :page-size="formSearch.pageSize"
            style="display: inline-flex"
        />
      </div>
      <add-modal-form ref="addModalMormRef" @addClick="tableList" v-if="columnsDistShow"></add-modal-form>
      <add-modal-form-car ref="addModalMormRefCar" @addClick="carListData" v-if="columnsDistShow"></add-modal-form-car>

      <get-car ref="getCarRef" @addClick="tableList" v-if="columnsDistShow"></get-car>
      <setting ref="settingRef"></setting>

    <a-modal v-model:visible="carVisible" :title="carTitle" v-if="carVisible">
        <a-form ref="formCarRef"  :rules="rulesCar" :model="formCarData" auto-label-width >
          <div v-if="carType==1 || carType==2">
            <a-form-item label="车辆" validate-trigger="change" field="car_id">
                <a-select v-model="formCarData.car_id"
                placeholder="请选择车辆" allow-clear allow-search>
                <a-option v-for="item in carList" :value="item.id" :key="item.id">{{item.car_number}}</a-option>
              </a-select>
              <a-button type="primary" style="margin-left: 10px;" @click="addCar">添加车辆</a-button>
              </a-form-item>
          </div>
          <div v-else>
            <a-form-item label="文件" validate-trigger="change">
                <a-upload v-model:file-list="upload.fileList" :action="upload.url" :headers="upload.headers" />
              </a-form-item>
            <a-form-item v-if="carType==3" field="isa_no" label="ISA" validate-trigger="change">
                <a-input v-model="formCarData.isa_no"  placeholder="请输入ISA" />
              </a-form-item>
              <a-form-item v-if="carType==4" field="date" label="实际送达时间" validate-trigger="change">
                <a-date-picker
                  style="width: 100%;"
                  showTime
                  placeholder="请选择实际送达时间"
                  v-model="formCarData.date"
                />
              </a-form-item>
          </div>
         </a-form> 
         <template #footer>
          <div style="display: flex; justify-content: space-between;align-items: center;">
            <div style="color: rgb(50 193 148);">
            </div>
            <div>
              <a-button @click="handleCancel()" style="margin-right: 20px;">关闭</a-button>
              <a-button type="primary" @click="handleOk(formCarRef)">
                保存
              </a-button>
            </div>
          </div>
        </template>
      </a-modal>
    </div>
  </div>

</template>
<script setup>
import {ref, reactive, provide, computed, watch, onMounted, h} from 'vue'
import waybillTaskSend from '@/api/abroad/waybillTaskSend'
import AddModalForm from "@/views/abroad/waybillTaskSend/components/addModalForm.vue";
import AddModalFormCar from "@/views/abroad/waybillCar/components/addModalForm.vue";

import GetCar from "@/views/abroad/waybillCar/components/getCar.vue";
import {Message} from '@arco-design/web-vue'
import {getDictData} from "@/utils/crud/dictNew.js";
import ButtonGroup from "@cps/actionsNew/buttonGroup.vue";
import common from "@/api/common.js";
import dicthelpApi from "@/api/dicthelpApi.js";
import Setting from "@/views/components/setting.vue";
import uploadConfig from '@/config/upload'
import {localColumns, tablePrantRefHeight} from "@/utils/crud/culmns.js";
import tool from '@/utils/tool'

const crudRef = ref()
const addModalMormRef = ref()
const addModalMormRefCar = ref()
const selected = ref([])
const getCarRef = ref()
const columnsDistShow = ref(false)
const shipmentTabs = ref([])//tabs赋值
const countList = ref({})
const tableRef = ref()
const tablePrantRef = ref() //tabel 父级高度
const dataList = ref([])
const loading = ref(false)
const settingRef = ref()
const columnsDist = ref([])
const formSearchRef=ref(null)
const formCarRef=ref(null)
const carTitle=ref('修改车辆')
const carType=ref(1)
//搜索更多是否显示
const searchHide = ref(false)
const currentStatus = computed(() => {
  let requestParams = formSearch
  if (!requestParams.status) {
    return null;
  }
  return requestParams.status
})

watch([shipmentTabs, countList],
    (newValues) => {
      if (shipmentTabs.value != '' && countList.value != '') {
        shipmentTabs.value.forEach(function (item) {
          item.count = countList.value[item.key] ? countList.value[item.key] : 0
        })
      }
    }
)

const carVisible = ref(false)

const formCarData = ref({
  car_id: "",
  isa_no:'',
  dateL:'',
})
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
//   open: false,
  // 弹出层标题（用户导入）
  title: "",
  fileList:[],
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + tool.getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_URL + "/system/uploadFile"
});
const carList = ref([])//c车辆列表
// 表单数据
const rulesCar = {
  car_id: [{required: true, message: '请选择车辆', validateTrigger: 'blur'},],
  isa_no: [{required: true, message: '请输入ISA', validateTrigger: 'blur'},],
  date: [{required: true, message: '请选择实际送达时间', validateTrigger: 'blur'},],

}
const handleCancel = () => {
  carVisible.value = false
}
//添加车辆
const addCar = () => {
  addModalMormRefCar.value.onShow()
}
//c车辆列表
const carListData = () => {
  dicthelpApi.waybillCarList().then(res => {
    carList.value = res.data
  })
}
//选择车辆
const handleOk = async (formEl) => {
  if (!formEl) return
  console.log('formCarData',formCarData.value)
  await formEl.validate((valid) => {
    if (!valid) {
      if(carType.value==1 || carType.value==2){
        waybillTaskSend.update(formCarData.value).then(res => {
          Message.success(res.message || `分配成功！`)
          carVisible.value = false
          tableList()
       })
      }else if(carType.value==3){
        let hash=''
        upload.fileList.map((item,index)=>{
          if(item.response?.data?.hash){
            hash=item.response?.data?.hash
          }
        })
        let data={
          ids:[formCarData.value.id],
          hash:hash,
          isa_no:formCarData.value.isa_no

        }
        waybillTaskSend.isaCar(data).then(res => {
          Message.success(res.message || `上传成功！`)
          carVisible.value = false
          tableList()
       })
      }else if(carType.value==4){
        let hash=''
        upload.fileList.map((item,index)=>{
          if(item.response?.data?.hash){
            hash=item.response?.data?.hash
          }
        })
        if(hash==''){
          Message.error('请上传文件')
          return;
        }
        let data={
          ids:[formCarData.value.id],
          hash:hash,
          date:formCarData.value.date
        }
        waybillTaskSend.podCar(data).then(res => {
          Message.success(res.message || `上传成功！`)
          carVisible.value = false
          tableList()
       })
      }
     
    }
  })
}

const computedColumns = computed(()=>{
  return localColumns(columnsData.value).filter(i=>{
    if(formSearch.status == ''){
      return true
    }
    if(i.dataIndex == 'pod' && ["1","2","3"].indexOf(formSearch.status) > -1){
      return false
    }
    if(i.dataIndex == 'close_at' && ["1","2","3",'4'].indexOf(formSearch.status) > -1){
      return false
    }
    return i.dataIndex !== 'status';
  })
})

const columnsData = ref([
  {title: '标题', dataIndex: 'title',width:200, hide: true,},
  {title: '状态', dataIndex: 'status', slotName: 'status', width: 100, align: 'center', hide: true,},
  {title: '服务类型', dataIndex: 'type', slotName: 'type', width: 150, align: 'center', hide: true,},
  {title: '目的地', dataIndex: 'address', slotName: 'address', width: 150, align: 'center', hide: true,},
  {title: '车辆', dataIndex: 'car', slotName: 'car', width: 180, align: 'center', hide: true,},
  {title: 'POD', dataIndex: 'pod', slotName: 'pod', width: 70, align: 'center', hide: true,},
  {title: 'ISA', dataIndex: 'isa', slotName: 'isa', width: 70, align: 'center', hide: true,},
  {title: '追踪编号', dataIndex: 'tracking_no', hide: true, width: 100,align: 'center',},
  {title: '备注', dataIndex: 'remark', hide: true, width: 150,align: 'center',},
  {title: '创建日期', dataIndex: 'created_at', width: 150, align: 'center', hide: true,ellipsis:true},
  {title: '预计送达时间', dataIndex: 'eta',slotName: 'eta',  width: 150, align: 'center', hide: true,ellipsis:true},
  {title: '送达时间', dataIndex: 'close_at',width: 150, align: 'center', hide: true,ellipsis:true},
  {title: '操作', slotName: 'fixed', fixed: 'right', width: 160, align: 'center', hide: true,},
]);


const openSetting = () => {
  settingRef.value.open()
}
//新增
const addAction = () => {
  addModalMormRef.value.onShow()
}
//详情
const editAction = (record) => {
  addModalMormRef.value.onShow(record)
}
//分配车辆
const eadrCar=(record,type)=>{
  if(type==1){
    carTitle.value="修改车辆"
  }else if(type==2){
    carTitle.value="分配车辆"
  }else if(type==3){
    carTitle.value="上传ISA"
  }else if(type==4){
    carTitle.value="上传POD"
  }
  carType.value=type
  let data = JSON.parse(JSON.stringify(record)); // 深拷贝数据
  carVisible.value=true
  if(data.car_id=='0' || data.car_id==0){
    data.car_id=''
    formCarData.value=data
  }else{
    formCarData.value=data
  }
  formCarData.value.isa_no=''
  formCarData.value.date=''
  upload.fileList=[]
}
//装车
const tapCar = (record) => {
  getCarRef.value.onShow(record)
}
//下载
const downloadatAachable = (item) => {
  let url = uploadConfig.storage.OSS + item.filepath
  window.location.href = url
}
//下载
const downloadTap = (record) => {
  waybillTaskSend.bolCar({id: record.id}).then(res => {
    tool.download(res)
    Message.success('请求成功，文件开始下载')
  })
}
//总页数
const pageInfo = ref({
  currentPage: 1,
  total: 0,
  totalPage: 1
})
//table 选择
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
});
//列表请求数据
const formSearch = reactive({
  type: '',
  address: '',
  car_id: '',
  shipment_no:'',
  car_number: '',
  title:'',
  created_at: [],
  refresh_tabs: 1,
  page: 1,
  pageSize: 10,
  status: '1',
})
//重置
const resetSearch = (e) => {
  formSearchRef.value.resetFields();
  console.log('formSearch', formSearch)
  tableList()
}
//搜索
const submitSearch = (e) => {
  formSearch.page = 1
  formSearch.refresh_tabs = 1
  searchHide.value = false
  tableList()
}
//切换分页
const pageChange = (e) => {
  if (e) {
    formSearch.page = e
    tableList()
  }
}
//切换条数
const pageSizeChange = (e) => {
  if (e) {
  tool.local.set('pageSize', e)
    formSearch.pageSize = e
    tableList()
  }
}
//行数选中
const setSelecteds = (key) => {
  selected.value = key
}
//tabs切换
const clickTap = (e) => {
  formSearch.page = 1
  formSearch.status = e
  formSearch.refresh_tabs = 0
  tableList()
}
//列表
const tableList = () => {
  loading.value = true
  formSearch.pageSize=tool.local.get('pageSize') || 10
  waybillTaskSend.getList(formSearch).then(res => {
    dataList.value = res.data.items
    //页数
    pageInfo.value = res.data.pageInfo
    countList.value = res.data.count
    formSearch.status = res.data.current_type.toString()
    selected.value = []
    loading.value = false
    tablePrantRefHeight(tablePrantRef.value)
  })
}

onMounted(() => {
  tableList()
})

const keywordTypes = [
  //  转单号   供应商单号
  {value: 'keywords', label: '单号'},
  // {value: 'public_number', label: '系统提单号'},
  {value: 'shipment_no', label: '运单号'},
  {value: 'outer_carrier_tracking_number', label: '转单号', index: '快递单号'},
  {value: 'ext_number', label: '扩展单号'},
  // {value: 'number', label: '客户单号'},
]
const switchKeywordType = (form, value) => {
  keywordTypes.map(i => {
    if (form[i.value] && i.value !== value) {
      form[value] = form[i.value]
      form[i.value] = undefined
    }
  })
}
//字典
const waybillColumns = async () => {
  let attrDict = ['waybill_sea_task_send_status', 'waybill_sea_car_type', 'waybill_sea_task_shipment_out', 'waybill_sea_task_urgent', 'AttachmentType']
  let [dictObj, dicthelpApi_depot, dicthelpApi_waybillCarList, dicthelpApi_waybillServiceShipmentTypeList, dicthelpApi_addressChang, dicthelpApi_supplier] = await Promise.all([
    common.getDicts(attrDict), dicthelpApi.depot({sea: 1}), dicthelpApi.waybillCarList(), dicthelpApi.waybillServiceShipmentTypeList(), dicthelpApi.addressChang(0), dicthelpApi.supplier({type: ['5']})
  ])
  return reactive({
    dictObj,
    dicthelpApi_depot,
    dicthelpApi_waybillCarList,
    dicthelpApi_waybillServiceShipmentTypeList,
    dicthelpApi_addressChang,
    dicthelpApi_supplier
  })
}

waybillColumns().then(res => {
  console.log('jjjjjjjjjjjj', res)
  columnsDist.value = res
  columnsDistShow.value = true
  let parcelType = res.dictObj.data.waybill_sea_task_send_status
  if (parcelType) {
    let obj = {
      id: '',
      title: '全部',
      key: '',
    }
    parcelType.push(obj)
    shipmentTabs.value = parcelType
  }
  carListData()
})
const buttonGroups = [
{
    title: '完成',
    api: waybillTaskSend.closeTap,
    auth: ['sea:waybillTaskSend:close'],
    hideStatus: [5, null],
    form: {
          key: 'ids',
          id:'id',
        }
  },
  // {
  //   title: '上传ISA',
  //   api: waybillTaskSend.isaCar,
  //   auth: ['sea:waybillTaskSend:isa'],
  //   hideStatus: [],
  //   form: {
  //     key: 'ids',
  //     id: 'id',
  //     columns: [
  //       {
  //         title: '文件',
  //         dataIndex: 'hash',
  //         type: "file",
  //         editDisplay: false,
  //         formType: "upload",
  //       },
  //       {
  //         title: 'ISA',
  //         dataIndex: 'isa_no',
  //         rules: {required: true, message: "请输入ISA"},
  //       },

  //     ]
  //   }
  // },
  // {
  //   title: '上传POD',
  //   api: waybillTaskSend.podCar,
  //   auth: ['sea:waybillTaskSend:pod'],
  //   hideStatus: [1, 2, 3, null],
  //   form: {
  //     key: 'ids',
  //     id: 'id',
  //     columns: [
  //       {
  //         title: '文件',
  //         dataIndex: 'hash',
  //         type: "file",
  //         editDisplay: false,
  //         formType: "upload",
  //         rules: {required: true, message: "请选择上传文件"},
  //       },

  //     ]
  //   }
  // },
]
provide('tableList', tableList);
provide('getDictData', getDictData)
provide('columnsData', columnsData)
provide('columnsDist', columnsDist)//全部字典
provide('dataList', dataList)
provide('formSearch', formSearch)
provide('selected', selected)
</script>
<script> export default {name: 'sea:waybillTaskSend'} </script>
<style>
.form-inline-card > .arco-card-body {
  padding: 0;
  display: grid;
  grid: 1fr / 1fr 1fr 1fr;
}

.form-inline-card > .arco-card-header {
  display: none;
}

.fee-up {
  border-bottom: dashed #777777 1px;
}

.fee-down {
  color: orange;
}

.customer-input-item .arco-btn-group button:first-child {
  display: none;
}

.table-list {
  margin-top: 5px;
}

.arco-tabs-content {
  padding: 0;
}

.foot-list {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.mainTable {
  padding-top: 68px;
}

.arco-select-view-inner {
  white-space: nowrap;
}

.arco-select-view-inner .arco-tag {
  white-space: nowrap !important;
}

.tabs .arco-tabs-tab {
  min-width: 70px;
  justify-content: center;
}
</style>